import { useEffect, useState } from 'react';
import { Input } from 'antd';
import { getMessage } from '@inbiz/react';
import './index.less';

const NumberGroup = (props: any) => {
  // 最小值
  const [min, $min] = useState<string>('');
  // 最大值
  const [max, $max] = useState<string>('');

  // 初始化回显值
  useEffect(() => {
    if (Array.isArray(props.value) && props.value.length === 2) {
      $min(props.value[0]);
      $max(props.value[1]);
    }
  }, [props.value]);

  // 值改变判断并更新表单值
  useEffect(() => {
    if (min === '' && max === '') {
      props.onChange?.([]);
    } else {
      props.onChange?.([min, max]);
    }
  }, [min, max]);

  return (
    <Input.Group compact>
      <Input
        placeholder={getMessage('BiFilterModal.comp_min')} // 最小值
        type="number"
        value={min}
        onChange={(e) => $min(e.target.value)}
        className={'site-input'}
        style={{
          width: 100,
          zIndex: 1,
        }}
      />
      <Input
        style={{
          width: 30,
          borderLeft: 0,
          borderRight: 0,
          pointerEvents: 'none',
          backgroundColor: '#fff',
          zIndex: 2,
        }}
        placeholder="~"
        disabled
      />
      <Input
        placeholder={getMessage('BiFilterModal.comp_max')} // 最大值
        type="number"
        value={max}
        min={min}
        onChange={(e) => $max(e.target.value)}
        className={'site-input'}
        style={{
          width: 100,
          zIndex: 1,
        }}
      />
    </Input.Group>
  );
};

export default NumberGroup;
